{include file="public/header" /}
<link href="/static/admin/css/plugins/jsTree/style.min.css" rel="stylesheet">

<style>
    #treeview .jstree-leaf > .jstree-icon, #treeview .jstree-leaf .jstree-themeicon {
        display: inline-block;
    }

    #treeview .jstree-themeicon {
        display: inline-block;
    }
</style>
<div class="row animated fadeInRight">
    <div class="col-md-3" id="left-content">
        <div class="box box-success">
            <div class="panel-heading">
                目录
            </div>
            <div class="panel-body">
                <div class="col-xs-12 col-sm-8">
                    <span class="text-muted"><input type="checkbox" name="" id="expandall"/> <label for="expandall"><small>展开全部</small></label></span>

                    <div id="treeview"></div>
                </div>
            </div>
        </div>

        <div class="box box-info">
            <div class="panel-heading">
                信息
            </div>
            <div class="panel-body">
                <h4>Size: <small id="info-size">Null</small></h4>
                <h4>Update Time: <small id="info-update_time">Null</small></h4>
            </div>
        </div>
    </div>

    <div class="col-md-9 col-xs-12" id="right-content">
        <div class="panel panel-default panel-intro panel-nav">
            <div class="panel-heading">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#one" data-toggle="tab"><i class="fa fa-list"></i>列表</a></li>
                </ul>
            </div>
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="toolbar" class="toolbar">

                                <a href="javascript:;" class="btn btn-default btn-channel hidden-xs hidden-sm"><i class="fa fa-bars"></i></a>
                            </div>
                            <table id="table" class="table table-striped table-bordered table-hover" width="100%"
                                   data-operate-detail="",
                                   data-operate-del=""
                            >

                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
{include file="public/footer" /}
<!-- jsTree plugin javascript -->
<script src="/static/admin/js/plugins/jsTree/jstree.min.js"></script>
<script>
    var nodeData = {:json_encode($directory);};
    function tree() {
        $('#treeview').jstree({
            "themes": {"stripes": true},
            "checkbox": {
                "keep_selected_style": false,
            },
            "types": {
                "folder": {
                    "icon": "jstree-folder",
                },
                "file": {
                    "icon": "jstree-file",
                }
            },
            "plugins": ["types"],
            "core":{
                "data":nodeData,
                'check_callback': false,
            }
        })
    };
    tree();
    $(document).on("click", "#expandall", function () {
        elTree.jstree($(this).prop("checked") ? "open_all" : "close_all");
    });
    // 开关目录
    $(document).on("click", "a.btn-channel", function () {
        $("#right-content").toggleClass("col-md-9", $("#left-content").hasClass("hidden"));
        $("#left-content").toggleClass("hidden");
    });
</script>